<template>
    <view class="checkbox-panel-group">
        <view class="body" :style="{height: bodyHeight}">
            <template v-if="value.length !== 0">
                <view class="checkbox-panel" v-for="(item, index) in value" :key="index">
                    <slot :index="index" :item="item" />
                </view>
            </template>
            <view v-else class="empty">
            </view>
        </view>
    </view>
</template>

<script>
    
    export default {
        name: 'PanelGroup',
        props: {
            title: {
                type: String,
                default: '默认标题'
            },
            value: {
                type: Array,
                default: () => []
            },
            bodyHeight: {
                type: String,
                default: 'auto'
            }
        },
        data() {
            return {
                isSelectedAll: false,
                list: [],
            }
        },
        watch: {
            value() {
                this.list = this.value;
            },
        },
        methods: {
            getSelections() {
                return this.list;
            }
        },
        beforeMount() {
            this.list = this.value;
        }
    }
</script>

<style scoped lang="scss">
    .checkbox-panel-group {
        font-size: 2rem;
        margin-top: 2rem;

        .body {
            overflow-y: scroll;
        }
    }

    .checkbox-panel {
        display: flex;
        border: 1px solid #ccc;
        border-radius: 2rem;
        padding: 0 3rem 2rem;
        margin-top: 3rem;

        &:first-child {
            margin-top: 0;
        }
    }

    .empty {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>